<template>
  <div>
    hello quankun

    <el-button type="primary" @click="xianshi">显示弹窗</el-button>
    <dialogs
      ref="dialogs"
      :dialogVisible="dialogVisible"
      @close="closeDelDialog"
    ></dialogs>
    <slide-verify
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :imgs="imgs"
      :accuracy="accuracy"
      :slider-text="text"
    >
      <div>{{ msg }}</div></slide-verify
    >
  </div>
</template>
<script>
import dialogs from "@/components/dialog";
// import SlideVerify from "vue-monoplasty-slide-verify";
import img0 from "../assets/logo.png";
import img1 from "../assets/肥猫1.jpeg";
import img2 from "../assets/肥猫2.jpeg";
import img3 from "../assets/肥猫3.jpeg";
export default {
  name: "About",
  components: { dialogs },
  data() {
    return {
      dialogVisible: false,
      accuracy: 5,
      msg: "",
      text: "向右滑",
      imgs: [img0, img1, img2, img3],
    };
  },
  methods: {
    onSuccess(times) {
      console.log("验证通过，耗时" + times / 1000 + "毫秒");
      this.msg = `验证通过，耗时${(times / 1000).toFixed(1)}s`;
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
    closeDelDialog() {
      this.dialogVisible = false;
    },
    xianshi() {
      this.dialogVisible = true;
    },
  },
};
</script>